<template>
	<el-container>
		<!--左侧-->
		<el-aside width="200px">
			<img src="../assets/loginBox.svg" class="asideImg">
			<p class="asideTitle">
				欢迎使用动力云客系统
			</p>
		</el-aside>

		<!--右侧-->
		<el-main>
			<div class="loginTitle">欢迎登录</div>

			<el-form ref="loginRefFrom" :model="user" label-width="120px" :rules="loginRules">

				<el-form-item label="账号" prop="loginAct">
					<el-input v-model="user.loginAct" />
				</el-form-item>

				<el-form-item label="密码" prop="loginPwd">
					<el-input type="password" v-model="user.loginPwd" />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="login()">登 录</el-button>
				</el-form-item>

				<el-form-item>
					<el-checkbox v-model="user.rememberMe" label="记住我" size="large" />
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
	import {
		defineComponent
	} from 'vue'

	import {
		doGet,
		doPost
	} from "../http/httpRequest.js";

	import {
		getTokenName,
		messageTip,
		removeToken
	} from "../util/util.js";

	export default defineComponent({
		// 组件的名字
		name: "LoginView",

		// 定义页面使用到的变量,定义时初始值都为空
		data() {
			return {
				// 对象变量定义 {}
				user: {},
				// 字符串变量定义 ''
				name: '',
				// 数字变量定义 0
				age: 0,
				// 数组变量定义 []
				arr: [],
				// list集合对象 [{},{}]
				userList: [{}],
				//定义form表单的验证规则对象
				loginRules: {
					//验证登录账号字段
					loginAct: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur'
					}],
					//验证登录密码字段
					loginPwd: [{
							required: true,
							message: '请输入登录密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: "密码长度为6-16位",
							trigger: 'blur'
						}
					]
				}
			}
		},

		//页面渲染dom元素后会触发调用该函数（函数钩子）
		mounted() {
			this.freeLogin();
		},

		// 页面上需要使用功能的js函数，都在methods属性中定义
		methods: {
			// 登陆函数
			login() {
				// 提交前保证输入框的合法性
				this.$refs.loginRefFrom.validate((isValid) => {
					// isValid是验证后的结果，如果是true表示验证通过，否则不通过
					if (isValid) {
						// 验证通过，可以提交登录
						let formDate = new FormData();
						formDate.append("loginAct", this.user.loginAct);
						formDate.append("loginPwd", this.user.loginPwd);
						formDate.append("rememberMe", this.user.rememberMe);

						doPost("api/login", formDate).then((resp) => {

							if (resp.data.code === 200) {
								// 提示
								messageTip("登陆成功", "success")

								// 删除一下历史sessionStorage和localStorage中存储的token
								removeToken();

								// 前端存储JWt
								if (this.user.rememberMe === true) {
									window.localStorage.setItem(getTokenName(), resp.data.data);
								} else {
									window.sessionStorage.setItem(getTokenName(), resp.data.data);
								}

								// 跳转到系统主页面
								window.location.href = "/dashboard";

							} else {
								// 登陆失败
								messageTip("登陆失败", "error")
							}
						})
					}
				})
			},
			// 免登录方法（自动登录）
			freeLogin() {
				let token = window.localStorage.getItem(getTokenName());
				if (token) { // 代表token不为空
					doGet("/api/login/free", {}).then(resp => {
						if (resp.data.code === 200) {
							// token验证通过，那么就可以免登录
							window.location.href = "/dashboard"
						}
					})
				}
			}
		}
	})
</script>

<style scoped>
	.el-aside {
		background: #1a1a1a;
		width: 40%;
		text-align: center;
	}

	.el-main {
		/*计算屏幕高度100% (铺满屏幕高度效果)*/
		height: calc(100vh);
	}

	img {
		height: 413px;
	}

	.imgTitle {
		font-size: 28px;
		color: #f9f9f9;
	}

	.el-form {
		width: 60%;
		/* 左右边距自动调整 */
		margin: auto;
	}

	.loginTitle {
		text-align: center;
		margin-top: 100px;
		margin-bottom: 25px;
		font-weight: bold;
	}

	.el-button {
		width: 100%;
	}
</style>